<template>
   <div>
	   <!--面包屑区域-->
	   <el-breadcrumb separator-class="el-icon-arrow-right">
	     <el-breadcrumb-item :to="{ path: '/adminHome/center' }">首页</el-breadcrumb-item>
	     <el-breadcrumb-item>文件管理</el-breadcrumb-item>
	     <el-breadcrumb-item>文件信息</el-breadcrumb-item>
	   </el-breadcrumb>
	   <!--卡片视图-->
	   <el-card >
		   <el-row :gutter="20">
		   <el-col :span="7" >
		   	<!-- <el-input placeholder="请输入文件名进行筛选"  v-model="searchQuery" >
		   	<el-button slot="append" icon="el-icon-search" @click="handleSearch()" >搜索</el-button> -->
			<el-input placeholder="输入文件名称进行筛选"  v-model="searchQuery" @change="handleChange">
				<el-button slot="append" icon="el-icon-circle-close" @click="clearSearchQuery"></el-button>
		   	</el-input>
		   </el-col>
			<el-col :span="4">
				<el-button type="primary" @click="dialogVisible = true ">上传文件</el-button>
			</el-col>
			<el-col :span="4">
				<el-button type="primary" @click="list">文件列表</el-button>
			</el-col>
			</el-row>
	   </el-card>
	   <!--表格-->
	     <el-table
	       :data="tableData"
	       style="width: 100%"
	       max-height="500">
	       <el-table-column
	         fixed
	         prop="fileID"
	         label="文件编号"
	         width="180">
	       </el-table-column>
	       <el-table-column
	         prop="fileName"
	         label="文件名"
	         width="150">
	       </el-table-column>
	       <el-table-column
	         prop="filePath"
	         label="文件路径"
	         width="250">
	       </el-table-column>
	       <el-table-column
	         prop="uploadDate"
	         label="上传时间"
	         width="250">
	       </el-table-column>
		   <el-table-column
		     prop="fileDescription"
		     label="文件描述"
		     width="250">
		   </el-table-column>
	       <el-table-column
	         fixed="right"
	         label="操作"
	         width="100">
	         <template slot-scope="scope">
	           <el-button
				 @click="deleteRow(scope.row.fileID)"
	             type="text"
	             size="small">
	             移除
	           </el-button>
	         </template>
	       </el-table-column>
	     </el-table>

	   <!--文本框-->
	   <el-dialog
	     title="编辑文件信息"
	     :visible.sync="dialogVisible"
	     width="40%">
		 <el-form :label-position="labelPosition" label-width="80px" :model="ruleForm" :rules="rules"  entype="" ref="ruleForm">
		  
			<el-form-item label="上传文件" prop="file">
        		<el-upload 
					ref="upload" 
					class="upload-demo" 
					action="/manager/appupdate/addAppUpdate" 
					:headers="headers"
          			:http-request="httpRequest" 
					:before-remove="beforeRemove" 
					:before-upload="beforeUploadFile" 
					:on-exceed="handleExceed"
          			multiple 
					:limit="1" 
					:auto-upload="false" 
					:on-change="getFile" 
					:data="ruleForm" 
					:file-list="fileList" 
					name="annexFile"
          			style="width: 500px;">
          			<el-button size="small" type="primary">点击上传</el-button>
          			<div slot="tip" class="el-upload__tip">{{message}}</div>
        		</el-upload>
      		</el-form-item>

		   <el-form-item label="文件名" prop="fileName">
				<el-input v-model="ruleForm.fileName"></el-input>
		   </el-form-item>
		    
		   <el-form-item label="文件描述" prop="fileDescription">
		     <el-input v-model="ruleForm.fileDescription"></el-input>
		   </el-form-item>
		 </el-form>

	     <span slot="footer" class="dialog-footer">
	       <el-button @click="dialogVisible = false">取 消</el-button>
	       <el-button type="primary" @click="handleSubmit()">确 定</el-button>
	     </span>
	   </el-dialog>
	   
   </div>
   
</template>
<script>
	export default{
		name: 'HomeView',
		components: {},

		mounted() {
			this.list();
		},

		data(){
			return {
				
				searchQuery:'',
				
				ruleForm: {
					file: null,
					fileName: '',
					fileDescription: ''
				},
				
					dialogVisible:false,
					labelPosition: 'right',

					rules:{  
						fileName: [ 	
							{ required: true, message: '请输入文件名', trigger: 'blur' }  
					      ], 
						fileDescription: [  
					        { required: true, message: '请选输入描述', trigger: 'blur' }  
					      ]
					},

					tableData:[]
			      };
		},
		methods: {

			clearSearchQuery() {
    			this.searchQuery = '';
				this.list();
  			},

			handleChange(){
				if(this.searchQuery == "" || this.searchQuery == null){
					this.list();
				}else{
					this.handleSearch();
				}
			},
			
			handleSearch() {
				let params = {
				    fileName: this.searchQuery 
				};  
					this.axios.get("/FilesSearchByName",{params:params})
					.then(
						response=>{
							this.tableData=response.data.data;
							console.log(this.tableData)
							if (response.data.code === 200) {
								this.$message({
								  message: response.data.message,  
								  type: 'success'  
								});  
								
							}else{
								this.$message({
								  message: response.data.message,  
								  type: 'warning' 
								  });  
							}
						}
					)
					.catch(error => {
					        console.error(error);  
					        this.$message({  
					        message: error.response.data.message,  
					        type: 'error'  
					        });  
					    });  
			},
			
			list(){
				this.axios.post('FilesList', {})
				.then(response => {
						this.tableData=response.data.data.list;
				 })
				.catch(error => {
				   console.error(error);
				 });
			},
			
		    deleteRow(id) {
		      this.axios.get("/FilesRemove",{
		          params: {
		            fileID: id
		          }
		        })
		      .then(
		      	response=>{
		      		this.list();
		      		console.log(response.data);
		      			this.$message.success('删除成功'); 
		      	}
		      )
		      .catch(error => {
		         console.error(error);
		       });
		    },

			getFile(file) {
      			this.ruleForm.file = file.raw;
    		},

			handleSubmit() {

				if (!this.ruleForm.file) {
    				this.$message.error('请选择一个文件');
    				return;
  				}

    			const formData = new FormData();
			
    			formData.append('file', this.ruleForm.file);
    			formData.append('fileName', this.ruleForm.fileName);
    			formData.append('fileDescription', this.ruleForm.fileDescription);

    			this.axios.post('/FilesUpload', formData, {
    			  headers: {
    			    'Content-Type': 'multipart/form-data'
    			 }
    			})
    			.then(response => {
    			   console.log(response.data);
    			   this.$message.success('添加成功');
    			   
    			   this.list();
    			   this.ruleForm= {
					file: null,
					fileName: '',
					fileDescription: ''
				   };

    			   this.dialogVisible = false;
    			 })
    			.catch(error => {
    			   console.error(error);
    			 });
    		},

			resetForm() {  
			      this.$refs.ruleForm.resetFields();   
			}
		},
			
	}
</script>

<style lang ="less" scoped>


</style>